import { MyHead } from "../../components/head"
import { Form,Button,Input ,Toast} from "antd-mobile"
import { YzmCom } from "../../components/yzmCom"
import { Link } from "react-router-dom"
import { FormInstance } from "antd-mobile/es/components/form"
import {useRef,useState} from 'react'
import { reg } from "../../util/reg"
import { PassCom } from "../../components/PassCom"
import { YZYzm, changePass, foundUser } from "../../api/user"
import { useTiaoZhuan } from "../../hooks/routers"
 const FindPass = ()=>{
    const formRef = useRef<FormInstance>({} as FormInstance)
    const [phone,setphone] = useState('')
    const {Tz} = useTiaoZhuan()
    const onFinish = async(value:{phone:string,Yzm:string,password:string})=>{
        let res = await foundUser(value.phone);
        if(res.result){
            let res1 = await YZYzm(value.phone,value.Yzm);
            if(res1.code){
                let res2 = await changePass(value.phone,value.password);
                console.log(res2);
                if(res2.code == 200){
                    Toast.show({
                        content:res2.msg
                    });
                    Tz(-1)
                }
            }else{
                Toast.show({
                    content:"验证码错误"
                })
            }
        }else{
            Toast.show({
                content:"手机号未注册"
            })
        }
    }
    return (
        <div>
            <MyHead title="找回密码"/>
            <Form
                style={{ padding: "0 10px", fontSize: '14px' }}
                ref={formRef}
                onFinish={onFinish}
                onFinishFailed={() => Toast.show({
                    content: '表单验证失败',
                })}
                layout='horizontal'
                footer={
                    <div >
                        <Button
                        style={{marginBottom:'10px'}}
                            block
                            color='primary'
                            type='submit'
                            size='middle'
                        >
                            验证登录
                        </Button>
                        <Button
                            block
                            color='danger'
                            type='reset'
                            size='middle'
                        >
                            重置
                        </Button>
                    </div>

                }
            >
                <Form.Item
                    name='phone'
                    label='手机号'
                    rules={[{ required: true, message: '手机号不能为空' }, { pattern: reg.phone, message: '手机格式不正确' }]}
                    help='11位手机号'
                >
                    <Input placeholder='请输入手机号' onChange={setphone} />
                </Form.Item>
                <YzmCom phone={phone} flagType={false}/>
                <PassCom label={"新密码"}/>
                <Form.Item>
                    <div className="links">
                        <Link to='/reg' style={{ color: '#f50' }}>注册</Link>
                        <Link to='/findpass'>找回密码</Link>
                    </div>
                </Form.Item>
            </Form>

        </div>
    )
}

export default FindPass